<template>
  <div class="mon-container">
    <div class="monitor">
      <video class="mon-vid">
        <source src="../../assets/校园安全管理系统/晚上睡不着2.mp4" type="video/mp4">
      </video>
      <div class="mon-info">
        <span class="text-info"><el-icon size="20"><LocationInformation/></el-icon>重庆财经学院41号楼</span>
        <span class="serial">001</span>
      </div>
    </div>
    <div class="monitor">
      <video class="mon-vid">
        <source src="../../assets/校园安全管理系统/晚上睡不着2.mp4" type="video/mp4">
      </video>
      <div class="mon-info">
        <span class="text-info"><el-icon size="20"><LocationInformation/></el-icon>重庆财经学院41号楼</span>
        <span class="serial">001</span>
      </div>
    </div>
    <div class="monitor">
      <video class="mon-vid">
        <source src="../../assets/校园安全管理系统/晚上睡不着2.mp4" type="video/mp4">
      </video>
      <div class="mon-info">
        <span class="text-info"><el-icon size="20"><LocationInformation/></el-icon>重庆财经学院41号楼</span>
        <span class="serial">001</span>
      </div>
    </div>
    <div class="monitor">
      <video class="mon-vid">
        <source src="../../assets/校园安全管理系统/晚上睡不着2.mp4" type="video/mp4">
      </video>
      <div class="mon-info">
        <span class="text-info"><el-icon size="20"><LocationInformation/></el-icon>重庆财经学院41号楼</span>
        <span class="serial">001</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MonitoringMain"
}
</script>

<style scoped>
/*设置主体样式*/
.mon-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 45px;
}
/*设置主体监视器样式*/
.monitor{
  display: flex;
  flex-direction: column;
  background: grey;
  padding: 8px 8px 8px 8px;
  border-radius: 10px;
  margin-top: 10px;
}
.mon-vid{
  width: 500px;
  height: 220px;
  background: black;
}
.mon-info{
  display: flex;
  flex-direction: row;
  padding: 5px 5px 5px 5px;
  background: white;
  margin-top: 10px;
  gap: 10px;
  border-radius: 10px;
}
.text-info{
  display: flex;
  flex-direction: row;
  width: 70%;
  background: #98caf8;
  border-radius: 10px;
  padding: 5px;
}
.serial{
  width: 30%;
  background: #98caf8;
  border-radius: 10px;
  padding: 5px;
  text-align: center;
}
</style>